<template>
<div class="music" :style="{backgroundImage:'url(' +app.musicCover+ ')'}" @dblclick="play">
    <audio @canplay="time" ref="audio" :src='app.musicUrl'></audio>
    <el-slider
            @dblclick.prevent="play"
            @mousedown="isChange = true" 
            ref="track"
            @change="change"
            v-model="process"
    ></el-slider>
    <div class="ctrl">
        <div class="last iconfont icon-icon_next_arrow"  @click="last" @dblclick.prevent="play"></div>
        <div class="play iconfont" :class="playico" @click="play"></div>
        <div class="next iconfont icon-icon_next_arrow" @click="next" @dblclick.prevent="play"></div>
    </div>
    <div class="L">{{ this.current }}</div>
    <div class="R">{{ this.total }}</div>
    <div>{{ this.volume }}</div>
</div>
</template>

<script>
    export default{
        props: ['app'],
        data() {
            return{
            total:"",
            current:"",
            volume:"0.5",
            process:90,
            playico: "icon-play",
            playing:false,
            cover:'https://p2.music.126.net/ciLKATqflV2YWSV3ltE2Kw==/109951166159281275.jpg',
            audio:'http://bylx666.gitee.io/music/0.mp3'
        }},
        created(){
            var lett = this;
            document.onkeyup = function() {
            var key = window.event.keyCode;
            if (key == 37 ||key == 65) {
            lett.last();}
            if (key == 39 ||key == 68) {
            lett.next();}
            if (key == 13 ||key == 32) {
            lett.play();}
            if (key == 87 ||key == 38) {
            lett.up();}
            if (key == 83 ||key == 40) {
            lett.down();}
            }
            },
        methods: {
            play(){
                if (this.playing){
                    this.playing = false;
                    this.$refs.audio.pause();
                    this.playico="icon-play_fill"

                } else {
                    this.playing = true;
                    this.$refs.audio.play();
                    this.playico="icon-stop-fill"
                }
            },
            next(){
                this.$refs.audio.currentTime = this.current +10
            },
            last(){
                this.$refs.audio.currentTime = this.current -10
            },
            up(){
                this.$store.state.volumn = this.$store.state.volumn +10
            },
            down(){
                this.$store.state.volumn = this.$store.state.volumn -10
            },
            time(){
                this.current=this.$refs.audio.currentTime
                this.total=this.$refs.audio.duration;
                this.volume=this.$refs.audio.volume;
                //ui
                var st = window.setInterval(() =>{
                if(this.$refs.audio!='[object HTMLAudioElement]'){clearInterval(st)}
                this.$refs.audio.volume = this.$store.state.volumn / 100;
                this.volume=this.$refs.audio.volume;
                if(this.isChange===true) return
                this.current=this.$refs.audio.currentTime;
                this.process = this.current / this.total * 100 || 0;
                }, 60);
                
            },
            change(){
                this.$refs.audio.currentTime=this.process / 100 * this.total;
                this.current=this.process / 100 * this.total;
                this.isChange = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .R{font-size:30px;position:absolute;right:0px;bottom:0;};.L{font-size:30px;position:absolute;left:0px;bottom:0;}
    .music{position:relative;width:100%;height:100%;
        background-size: cover;background-attachment: scroll;background-position: center;
    }
    .el-slider {
    left:0;bottom:0;position:absolute;width: 100%;z-index:10;
    --el-slider-margin: 0px 0;
    --el-slider-border-radius: 0px;
    --el-slider-height: 10px;}
    .ctrl{
        position:absolute;left:50%;bottom:30px;
        .iconfont{font-size: 30px;width:30px;height:30px;}
        .play{position:relative;transform:rotate(90deg)}
        .last{margin:0px 0px -30px -30px;position:relative;transform:rotate(180deg)}
        .next{margin:-30px 0px 0px 30px;position:relative}
    }
</style> 
